<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="/WEB-INF/quik_function.tld" prefix="qu"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>咨客_消费</title>
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/default/easyui.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/icon.css" />" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.2.js" />"></script>
		<script type="text/javascript" src="<c:url value="/resources/js/util.js" />"></script>
		<script type="text/javascript">
			var trID = 1;   //全局的表格TR标识
			
			function getSubCategory(category){
				if(category.value == 0){
					$("#subCategoryId").combobox("loadData", getData());
				}else{
					$("#subCategoryId").combobox("clear");
					$("#subCategoryId")
						.combobox("loadData", getDanimicData(category.value));
					$("#subCategoryId").combobox("setValue", '0');
				}
			}
			
			function getData(){
				var rows = [];
				rows.push({
					id: '0',
					product_sub_category_name: '---请选择---'
				});
				
				return rows;
			} 
			
			function getDanimicData(categoryId){
				var data = '';
				$.ajax({
					url:'../product/getSubCategory.do',
					data:{'categoryId':categoryId},
					type:'post',
					dataType:'json',
					async:false,
					cache:false,
					success:function(datas){
						data = datas;
					}
				});
				
				if (!data.topRows){	            	
	            	data.topRows = [];
	            	data.topRows.push({
						id: '0',
						product_sub_category_name: '---请选择---'
					});
	            	for(var i=0; i<data.length; i++){
	            		var row = data[i];
	            		data.topRows.push(row);
	            	}
	            }  
	
				data = $.extend(true,[],data.topRows);
				return data;
			}
			
			function onQuery(){				
				$('#productTable').datagrid({
					url: '../product/queryProduct.do',
					pageNumber:1,				
					queryParams:{categoryId:$("#categoryId").combobox('getValue'),						
						subCategoryId:$("#subCategoryId").combobox('getValue'),
						productNo:'',
						productName:$.trim($('#productName').val())}
				});
			}
			
			function onReset(){
				$("#categoryId").combobox("setValue", '0');
				$("#subCategoryId").combobox("clear");
				$("#subCategoryId").combobox("loadData", getData());
				$("#subCategoryId").combobox("setValue", '0');
				$("#productName").val('');
			}

			function onProduct(data){			
				var index = trID++;
				//var rownum = $("#openTable tr").length;
				var row = "<tr><td style='width:15%; border: 1px solid #7F9DB9;'>" + data.product_no + "</td>";
				row += "<td style='width:15%; border: 1px solid #7F9DB9;'>" + data.product_name + "</td>";
				row += "<td style='width:5%; border: 1px solid #7F9DB9;'>" +
					   "<select name='addqty" + index + "' id='addqty" + index + "' onchange=\"totalPrice(this.value, " + data.price + ", 'to" + index + "')\">";
				for(var i=1; i<11; i++){
					row += "<option value='" + i + "'>" + i + "</option>"; 
				}
				row += "</select></td>";
				row += "<td style='width:20%; border: 1px solid #7F9DB9;'>￥" + numFormat(data.price) + "(" + data.unit + ")</td>";
				row += "<td style='width:20%; border: 1px solid #7F9DB9;'>￥<span id='to" + index + "'>" + numFormat(data.price) + "</span>(" + data.unit + ")</td>";
				row += "<td style='width:10%; border: 1px solid #7F9DB9;'>";
				if(data.if_able_discount == 0)
					row += "是";
				else
					row += "否";				
				row += "<input type='hidden' name='rowIndex' id='rowIndex' value='" + index + "' />";
				row += "<input type='hidden' name='addworker" + index + "' id='addworker" + index + "' value='" + data.if_need_worker + "' />";
				row += "<input type='hidden' name='addprice" + index + "' id='addprice" + index + "' value='" + data.price + "' />";
				row += "<input type='hidden' name='addchess" + index + "' id='addchess" + index + "' value='" + data.if_chess_room + "' />";
				row += "<input type='hidden' name='addproductNo" + index + "' id='addproductNo" + index + "' value='" + data.product_no + "' />";
				row += "</td>";
				row += "<td style='width:17%; border: 1px solid #7F9DB9;'><a href='#' onclick='onDel(this)'>删除</a></td>";
				row += "</tr>";
				$("#addProductTable").append(row);
			}
			
			function onCancelProduct(){
				$("#room_no").val('');
				$("#token_no").val('');
				var row = $("#addProductTable tr").length;
				
				for(var i = row - 1; i >= 1; i--){					
					$("#addProductTable").find("tr").eq(i).remove();
				}
				
				trID = 1;
			}
			
			function onDel(row){				
				$(row).parent().parent().remove();
			}
			
			function onAddProduct(){
				if(!($.trim($("#token_no").val()) != '' || $.trim($("#room_no").val()) != '')){
					$.messager.alert('警告', "请填写房间号或手牌号!");
					return false;
				}
				
				var rows = document.getElementsByName("rowIndex");
				if(rows != 'undefined' && rows.length > 0){
					var productNo = "";
					for(var i = 0; i < rows.length; i++){
						productNo += $("#addproductNo" + rows[i].value).val() + ";" +
						             $("#addworker" + rows[i].value).val() + ";" +
						             $("#addchess" + rows[i].value).val() + ";" +
						             $("#addprice" + rows[i].value).val() + ";" +
						             $("#addqty" + rows[i].value).val() + (i == rows.length - 1 ? '' : ',');
					}
					$.ajax({
						url:'consume',
						data:{'roomNo':$("#room_no").val(),
							  'tokenNo':$("#token_no").val(),
							  'productNo':productNo},
						type:'post',
						dataType:'text',
						async:false,
						cache:false,
						success:function(data){
							if(data == 'success'){								
								onCancelProduct();
								$.messager.alert('操作结果',"消费成功!");
							}else
								$.messager.alert('操作结果',data);
						}
					});
				}else
					$.messager.alert('警告','请选择消费项目!');
			}
			
			function totalPrice(num, price, index){
				var total = numFormat(num * price);
				$("#" + index).html(total);
			}
		</script>
	</head>
	
	<body>
		<c:import url="/WEB-INF/resources/common/consult_header.jsp" />
		
		<h1>消费</h1>
		
		手牌编号：
		<input class="easyui-validatebox" style="width:150px;" type="text"  name="token_no" id="token_no" />
		&nbsp;&nbsp;&nbsp;&nbsp;
		房间编号：
		<input class="easyui-validatebox" style="width:150px;" type="text"  name="room_no" id="room_no" />
		&nbsp;&nbsp;&nbsp;&nbsp;
		
		<div style="height:1000px;">	
				<div id="productDIV">
					<h1>选择商品</h1>
					
					<!-- 存放商品的查询及列表 -->
					<div>
						<table id="productTable" class="easyui-datagrid"  style="width:700px;height:250px;"
				 			data-options="rownumbers:true,singleSelect:true,toolbar:'#tb',border:true,pagination:true,url:'../product/queryProduct.do', onClickRow:function(rowIndex, rowData){
	 							onProduct(rowData);
	 					}">
							<thead>
								<tr>
									<th data-options="field:'product_no',width:110,align:'center'">商品编号</th>
									<th data-options="field:'product_name',width:130,align:'center'">商品名称</th>
									<th data-options="field:'product_sub_category_name',width:100,align:'center'">所属类别</th>
									<th data-options="field:'price',width:90,align:'center',formatter:function(value){
											return numFormat(value);
										}">产品单价</th>
									<th data-options="field:'vip_price',width:90,align:'center',formatter:function(value){
										return numFormat(value);
									}">会员价</th>
									<th data-options="field:'unit',width:100,align:'center'">单位</th>
								</tr>
							</thead>
						</table>
						
						<div id="tb" style="padding:5px;height:auto">
							<form id="queryProductForm" name="queryProductForm" action="queryProduct" method="post">
							<div>
								类别: 
								<select class="easyui-combobox" id="categoryId" name="categoryId" style="width:100px" data-options="panelHeight:'auto',onSelect:function(value){
					    			getSubCategory(value);
					    		}">
									<option value="0" >---请选择---</option>
									<c:forEach var="code" items="${categoryList}">
										<option value="${code.id}">${code.product_category_name}</option>	
									</c:forEach>
								</select>
								&nbsp;&nbsp;&nbsp;&nbsp;
								子类: 
								<select class="easyui-combobox" panelHeight="auto" id="subCategoryId" name="subCategoryId" style="width:100px"
									data-options="required:true, panelHeight:'auto', valueField:'id', textField:'product_sub_category_name'">
									<option value="0" >---请选择---</option>
								</select>
								&nbsp;&nbsp;&nbsp;&nbsp;								                          
								商品名称: <input class="easyui-validatebox" name="productName" id="productName" style="width:80px">
								&nbsp;&nbsp;
								<a href="#" class="easyui-linkbutton" id="searchBtn" style="text-align: center" onclick="onQuery()">查询</a>
								<a href="#" class="easyui-linkbutton" id="resetBtn" style="text-align: center" onclick="onReset()">清空</a>
							</div>
							</form>
							
						</div>
					</div>
					
				</div>
				
				<div id="addProductDIV" style="margin-top: 5px; height:250px; ">
					<table id="addProductTable" style="border-collapse: collapse;width:700px;text-align: center;">
						<tr>
							<td style="width:15%; border: 1px solid #7F9DB9;">编号</td>
							<td style="width:15%; border: 1px solid #7F9DB9;">项目</td>
							<td style="width:10%; border:1px solid #7F9DB9">数量</td>
							<td style="width:20%; border: 1px solid #7F9DB9;">单价</td>
							<td style="width:20%; border: 1px solid #7F9DB9;">总价</td>
							<td style="width:10%; border: 1px solid #7F9DB9;">是否打折</td>										
							<td style="width:10%; border: 1px solid #7F9DB9;">操作</td>
						</tr>	
					</table>
					<br/>
					<span style="padding-left:200px;text-align:center;">
						<input type="button" id="addProductBtn" name="addProductBtn" value="消费" onclick="onAddProduct ()"/>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="button" id="cancelProductBtn" name="cancelProductBtn" value="全部删除" onclick="onCancelProduct()"/>  
					</span>
				</div>
			</div>
	</body>
</html>